<template>
  <div class="category-wrapper">
    <div class="execute-box">
      <el-button @click="showDialog">新建</el-button>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%"
      border>
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="goodCode"
        label="商品编号"
        width="180">
      </el-table-column>
      <el-table-column
        align="center"
        prop="goodName"
        label="商品名称"
        width="180">
      </el-table-column>
      <el-table-column
        align="center"
        prop="goodModel"
        label="商品型号">
      </el-table-column>
      <el-table-column
        align="center"
        prop="typeName"
        label="商品类型">
      </el-table-column>
      <el-table-column
        align="center"
        prop="purchasingPrice"
        label="采购价">
      </el-table-column>
      <el-table-column
        align="center"
        prop="lastPurchasingPrice"
        label="上次采购价格">
      </el-table-column>
      <el-table-column
        align="center"
        prop="sellPrice"
        label="售价">
      </el-table-column>
      <el-table-column
        align="center"
        prop="storeNum"
        label="库存数量">
      </el-table-column>
      <el-table-column
        align="center"
        prop="minStoreNum"
        label="库存下限">
      </el-table-column>
      <el-table-column
        align="center"
        prop="state"
        label="状态">
      </el-table-column>
      <el-table-column
        align="center"
        prop="producer"
        label="生产厂商">
      </el-table-column>

      <el-table-column
        align="center"
        label="操作"
        width="180">
        <template v-slot="obj">
          <el-button type="primary" size="mini" @click="dialogVisible = true,findById(obj.row.goodCode)">编辑</el-button>
          <el-button type="danger" size="mini" @click="dialogVisible1 = true,formData.id = obj.row.goodCode">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      style="text-align: right; margin-top: 20px"
      background
      layout="prev, pager, next"
      :total="total"
      :currentPage="currentPage"
      :pageSize="pageSize"
      @current-change="pageChangeHandle">
    </el-pagination>

    <!--新建弹出框-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="35%">
      <el-form ref="formData"
               :model="formData"
               label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品名称">
              <el-input v-model="formData.goodName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采购价">
              <el-input v-model="formData.purchasingPrice"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品型号">
              <el-input v-model="formData.goodModel"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品类型">
              <el-cascader
                :props="props"
                v-model="formData.typeId"
                :options="options"></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="售价">
              <el-input v-model="formData.sellPrice"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库存数量">
              <el-input v-model="formData.storeNum"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="库存下限">
              <el-input v-model="formData.minStoreNum"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位">
              <el-input v-model="formData.goodUnit"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-input v-model="formData.state"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产厂商">
              <el-input v-model="formData.producer"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="备注">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="formData.remarks"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false,addOrUpdate()">确 定</el-button>
        </span>
    </el-dialog>
    <!--删除弹框-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible1"
      width="30%">
      <el-form label-width="80px">
        <span>是否删除文件</span>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible1 = false,del()">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
  import obj from "./index.js"

  export default obj;
</script>

<style scoped lang="scss">
  @import "./index.scss";
</style>
